<template>
	<view>
		<view
			class="tui-navigation-bar"
			:class="{ 'tui-bar-line': opcity > 0.85 && splitLine, 'tui-navbar-fixed': isFixed }"
			:style="{ height: height + 'px', backgroundColor: `rgba(${backgroundColor},${opcity})` }"
		>
			<view class="tui-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="tui-navigation-content" :style="{ height: (height - statusBarHeight) + 'px' }">
				<view class="tui-navigation-title" :style="{ color: color }" v-if="!isCustom">{{ title }}</view>
				<slot />
				<view class="tui-navigation-back" @click="onBack" v-if="isBack">
					<template>
						<tui-icon name="arrowleft" size="50" :color="color"></tui-icon>
						<view class="tui-navigation-back-text" :style="{ color: color}" v-if="!isCustom">返回</view>
					</template>
				</view>
			</view>
		</view>
		<!-- 空出的距离 -->
		<view :style="{ height: height + 'px' }" v-if="isEmty"></view>
	</view>
</template>

<script>
export default {
	name: 'tuiNavigationBar',
	props: {
		// NavigationBar标题
		title: {
			type: String,
			default: ''
		},
		// NavigationBar标题颜色
		color: {
			type: String,
			default: '#000'
		},
		// NavigationBar背景颜色 rgb
		backgroundColor: {
			type: String,
			default: '255,255,255'
		},
		// 是否需要分割线
		splitLine: {
			type: Boolean,
			default: false
		},
		// 是否设置不透明度
		isOpcity: {
			type: Boolean,
			default: false
		},
		// 滚动条滚动距离
		scrollTop: {
			type: [Number, String],
			default: 0
		},
		/*
		 isOpcity 为true时生效
		 opcity=scrollTop /windowWidth * scrollRatio
		*/
		scrollRatio: {
			type: [Number, String],
			default: 0.3
		},
		// 是否固定定位
		isFixed: {
			type: Boolean,
			default: true
		},
		// 是否空出导航栏高度
		isEmty: {
			type: Boolean,
			default: true
		},
		// 是否显示返回按钮
		isBack: {
			type: Boolean,
			default: false
		},
		// 是否自定义header内容
		isCustom: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		scrollTop(newValue, oldValue) {
			if (this.isOpcity) {
				this.opcityChange()
			}
		}
	},
	data() {
		return {
			width: 375, // header宽度
			left: 375, // 小程序端 左侧距胶囊按钮距离
			height: 44, // header高度
			top: 0,
			scrollH: 0, // 滚动总高度,计算opcity
			opcity: 0, // 0-1
			statusBarHeight: 0 // 状态栏高度
		}
	},
	created() {
		this.opcity = this.isOpcity ? this.opcity : 1
		let obj = {}
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect()
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect()
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu()
		// #endif

		uni.getSystemInfo({
			success: res => {
				this.statusBarHeight = res.statusBarHeight
				this.width = res.windowWidth
				this.left = obj.left || res.windowWidth
				this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
				this.scrollH = res.windowWidth * this.scrollRatio
				this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6
				this.$emit('init', {
					width: this.width,
					height: this.height,
					left: obj.left,
					top: this.top,
					statusBarHeight: this.statusBarHeight,
					opcity: this.opcity
				})
			}
		})
	},
	methods: {
		// 改变透明度
		opcityChange() {
			let scroll = this.scrollTop <= 0 ? 0 : this.scrollTop
			let opcity = scroll / this.scrollH
			if ((this.opcity >= 1 && opcity >= 1) || (this.opcity === 0 && opcity === 0)) {
				return
			}
			this.opcity = opcity
			this.$emit('change', {
				opcity: this.opcity
			})
		},
		// 返回上一页
		onBack() {
			if (getCurrentPages().length < 2) {
			  return uni.switchTab({ url: '/pages/home/home' })
			}
			uni.navigateBack({
			  delta: 1
			})
		}
	}
}
</script>

<style scoped>
.tui-navigation-bar {
	width: 100%;
}
.tui-navbar-fixed {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9998;
}
.tui-status-bar {
	width: 100%;
}
.tui-navigation-content {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.tui-navigation-title {
	width: 360rpx;
	text-align: center;
	font-size: 30rpx;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tui-navigation-back {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	position: absolute;
	top: 0;
	left: 10rpx;
}
.tui-navigation-back-text {
	margin-left: -8rpx;
	font-size: 28rpx;
	color: #fff;
}
.tui-bar-line::after {
	content: '';
	position: absolute;
	border-bottom: 1rpx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}
</style>
